import './index.less'
import { useState } from 'react';
import { Table, Button, Flex, Popconfirm, } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import Add from './add'
function Child1() {
    interface DataType {
        key: React.Key;
        name: string;
        age: number;
        address: string;
    }
    const [addShow, setAddShow] = useState(false);
    const handleSetOpens = (opens: boolean) => {
        setAddShow(opens);
    };
    const confirm = () => {
        console.log('确认删除')
    };

    const cancel = () => {
        console.log('取消删除')
    };
    const columns: ColumnsType<DataType> = [
        {
            title: 'Full Name',
            dataIndex: 'name',
            key: 'name',
            align: 'center',
        },
        {
            title: 'Age',
            dataIndex: 'age',
            key: 'age',
            align: 'center',
        },
        {
            title: 'Action',
            key: 'operation',
            fixed: 'right',
            align: 'center',
            width: 120,
            render: () => (
                <Popconfirm
                    title=''
                    description="是否确认删除?"
                    placement="bottom"
                    onConfirm={confirm}
                    onCancel={cancel}
                    okText="是"
                    cancelText="否"
                >
                    <Button type="link" danger>删除</Button>
                </Popconfirm>)
        },
    ];
    const data: DataType[] = [
        {
            key: '1',
            name: 'John Brown',
            age: 32,
            address: 'New York Park',
        },
        {
            key: '2',
            name: 'Jim Green',
            age: 40,
            address: 'London Park',
        },
    ];
    return (<div id="child1_container">
        <div className='control_bar'>
            <div className='control_item'>
                <Flex gap="small" wrap="wrap">
                    <Button type="primary" onClick={() => { setAddShow(true) }} >添加</Button>
                    <Button type="primary" style={{ background: '#67c23a' }} >导入</Button>
                    <Button type="primary" style={{ background: '#909399' }} >附件上传</Button>
                    <Button type="primary" style={{ background: '#e6a23c' }} >标签管理</Button>
                </Flex>
            </div>
            <div className='control_item'></div>
        </div>
        <div className='tabel_bar'>
            <Table columns={columns} dataSource={data} scroll={{ x: 0 }} />
        </div>
        {/* 附 */}
        <Add opens={addShow} setOpens={handleSetOpens} />
    </div>
    );
}

export default Child1;